<template>
  <div>
    <lab_head />
    <lab_header :title="忘记密码" />
    <div class="container layout layout-margin-top">
      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="content" style="height: 550px">
            <!-- <div class="row"> -->

            <br />
            手机号:
            <input type="text" v-model="phone" />
            <span style="color: red">{{ phone_message }}</span>
            <br />
            新密码: <input type="password" v-model="new_password" />
            <br />
            确认新密码:
            <input type="password" v-model="confirm_new_password" />
            <br />
            <input
              type="text"
              v-model="code"
              class="form-control"
              placeholder="请输入验证码"
            />
            <Button @click="sendcode" v-model="is_send">获取手机验证码</Button>
            <button @click="changePassword">修改</button>
          </div>
        </div>
        <div class="col-md-3 layout-side">
          <user_info />
          <last_paths />
          <QR_code />
        </div>
      </div>
    </div>
    <lab_footer />
  </div>
</template>

<script>
import { send_phone_code_post, change_pwd } from "@/components/axios_api/api";

import lab_head from "../components/common/lab_head";
import lab_header from "../components/common/lab_header";
import lab_footer from "../components/common/lab_footer";
import user_info from "../components/common/user_info";
import last_paths from "../components/common/last_paths";
import QR_code from "../components/common/QR_code";

export default {
  data() {
    return {
      phone: "",
      phone_message: "",
      new_password: "",
      confirm_new_password: "",
      code: "",
      is_send: false,
    };
  },
  components: {
    lab_head,
    lab_header,
    lab_footer,
    user_info,
    last_paths,
    QR_code,
  },

  methods: {
    // 发送短信验证码
    sendcode: function () {
      console.log(this.email);
      // 1、验证手机号是否为空
      if (!this.phone) {
        this.message = "手机号不能为空";
        this.$Message(this.message);
        return false;
      }
      // 2、正则验证手机号格式
      var reg = new RegExp(/^[1][34578][0-9]{9}$/);
      if (!reg.test(this.phone)) {
        //检测字符串是否符合正则表达式
        this.message = "手机号格式不正确";
        this.$Message(this.message);
      }
      // 密码
      if (this.password != this.password2) {
        this.$Message("两次密码不一致");
        return false;
      }

      // 3、将用户短信发送
      var data = { phone: this.phone };
      send_phone_code_post(data)
        .then((res) => {
          console.log(">>>>>>>>>>>>>>>", res);
          if (res.code == 200) {
            this.is_send = true;
            let t = 60;
            let si = setInterval(() => {
              this.msgButtonText = t;
              t -= 1;
              if (t == 0) {
                this.is_send = flash;
                this.msgButtonText = "获取手机验证码";
                clearInterval(si);
              }
            }, 1000);
            console.log("短信发送成功");
            alert("短信发送成功");
            alert(res.message);
          } else {
            alert(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //  修改密码
    changePassword() {
      var data = {
        phone: this.phone,
        pwd: this.new_password,
        sms_code: this.code,
        confirm_pwd: this.confirm_new_password,
      };
      // 修改密码
      change_pwd(data)
        .then((resp) => {
          console.log("修改密码>>>", resp);
          if (resp.code === 200) {
            alert(resp.message);
            this.$router.push("/");
          } else {
            this.$Message(resp.message);
          }
        })
        .catch((error) => {});
    },
  },
};
</script>